<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
    <a-modal
        :loading="loading"
        v-model:visible="visible"
        :footer="false"
        :mask="false"
        @cancel="close"
        draggable
    >
        <template #title>{{ $t('basics.daoru') }} </template>
        <div v-show="props.isShowType" class="flex items-center">
            {{ $t('basics.TypeFiltering') }}：
            <a-select v-model="reply_type" :options="selectList" class="flex-1">
            </a-select>
        </div>
        <div class="status_loding" v-if="loading">
            <icon-loading class="text-5xl text-gray-400" />
        </div>
        <a-upload
            draggable
            :custom-request="upload"
            :show-file-list="false"
            accept=".xlsx,.xls"
        >
            <template #upload-button>
                <div style="" class="rounded text-center py-14 px-7 mt-4">
                    <div class="flex flex-col items-center">
                        <!-- <icon-upload class="text-5xl text-gray-400" /> -->
                        <img
                            class="text-[0px] w-[56px] h-[56px] imp-img"
                            src="@/assets/images/ic_daoru.png"
                        />
                        <div class="text-red-600 font-bold py-4">
                            {{ $t('basics.daoruexcel') }}
                        </div>
                        <div class="flex">
                            {{ $t('basics.wenjiantuoru') }}
                            <span style="color: #3370ff">
                                {{ $t('basics.dianjishangchuan') }}
                            </span>
                            {{ $t('basics.zhinengshangchuan') }}
                        </div>
                    </div>
                </div>
            </template>
        </a-upload>
        <div
            v-if="props.isShowLoad"
            style="margin-top: 6px"
            class="italic text-right"
        >
            <a-link @click="sendDownload">{{ $t('basics.coazai') }}</a-link>
        </div>
    </a-modal>
</template>

<script setup>
import { ref } from 'vue';
import commonApi from '@/api/common';
import tool from '@/utils/tool';
import { Message } from '@arco-design/web-vue';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
let reply_type = ref(0);
const loading = ref(false);
const visible = ref(false);
const selectList = ref([
    {
        value: 1,
        label: t('basics.FirstSentenceReply')
    },
    {
        value: 2,
        label: t('basics.SecondSentenceReply')
    },

    {
        value: 0,
        label: t('basics.BeCommon')
    }
]);
const props = defineProps({
    upLoadData: {
        type: Object,
        default: {
            url: '', // 上传路径
            params: {} // 参数
        }
    },
    downLoadData: {
        type: Object,
        default: {
            url: '', // 下载路径
            params: {} // 参数
        }
    },
    isShowType: {
        type: Boolean,
        default: false
    },
    isShowLoad: {
        type: Boolean,
        default: true
    }
});
const emit = defineEmits(['success']);

const open = () => (visible.value = true);
const close = () => (visible.value = false);

const upload = (fileOption) => {
    Message.info(t('basics.wnjianshangchuan'));
    loading.value = true;
    const dataForm = new FormData();
    //   console.log(reply_type.value,'-=-=',)
    // props.upLoadData.props.reply_type=reply_type.value
    const { url, params } = props.upLoadData;

    console.log(params);
    for (const key in params) {
        if (Object.hasOwnProperty.call(params, key)) {
            const element = params[key];
            dataForm.append(key, element);
        }
    }
    dataForm.append('file', fileOption.fileItem.file);
    if (props.isShowType) {
        dataForm.append('reply_type', reply_type.value);
    }
    commonApi.importExcel(url, dataForm).then(async (res) => {
        res.success &&
            Message.success(res.message || t('basics.daoruchenggong'));
        emit('success');
        loading.value = false;
        close();
    });
};

const sendDownload = () => {
    Message.info(t('basics.qingqiuxiazai'));
    const { url, params } = props.downLoadData;
    if (/^(http|https)/g.test(url)) {
        window.open(url);
    } else {
        commonApi.download(url).then((res) => {
            tool.download(res);
            Message.success(t('basics.qingqiuchenggong'));
        });
    }
};

defineExpose({ open, close });
</script>

<style lang="less" scoped>
.status_loding {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #00000099;
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
